<template>
  <div>
    <div class="container">
      <div class="form_area">
        <p class="title">注册</p>
        <form action="">
          <div class="form_group">
            <label class="sub_title" for="name">账号</label>
            <input
              placeholder="请输入账号"
              v-model="username"
              class="form_style"
              type="text"
            />
          </div>
          <div class="form_group">
            <label class="sub_title" for="email">密码</label>
            <input
              placeholder="请输入密码"
              v-model="password"
              id="email"
              class="form_style"
              type="email"
            />
          </div>
          <div class="form_group">
            <label class="sub_title" for="password">二次密码</label>
            <input
              placeholder="请输入二次密码"
              v-model="password1"
              id="password"
              class="form_style"
              type="password"
            />
          </div>
          <div>
            <button class="btn" @click="fn">注册</button>
            <p><a class="link" href="/login">有账号了,去登录</a></p>
            <a class="link" href=""></a>
          </div>
          <a class="link" href=""> </a>
        </form>
      </div>
      <a class="link" href=""> </a>
    </div>
  </div>
</template>

<script setup lang="ts">
const router = useRouter();
import { ref } from "vue";
import { useRouter } from "vue-router";
definePageMeta({
  layout: "none",
});
let username = ref("");
let password = ref("");
let password1=ref("")
async function fn() {
  console.log(username.value, "userinfo");
  let { data } = await useFetch("/api/register", {
    method: "POST",
    body: { username: username, password: password},
  });
  if (data.value.code == 2000) {
    router.push("/login");
  }else{
    alert('账户已存在')
  }
}
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.form_area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #eddcd9;
  height: auto;
  width: auto;
  border: 2px solid #264143;
  border-radius: 20px;
  box-shadow: 3px 4px 0px 1px #e99f4c;
}

.title {
  color: #264143;
  font-weight: 900;
  font-size: 1.5em;
  margin-top: 20px;
}

.sub_title {
  font-weight: 600;
  margin: 5px 0;
}

.form_group {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  margin: 10px;
}

.form_style {
  outline: none;
  border: 2px solid #264143;
  box-shadow: 3px 4px 0px 1px #e99f4c;
  width: 290px;
  padding: 12px 10px;
  border-radius: 4px;
  font-size: 15px;
}

.form_style:focus,
.btn:focus {
  transform: translateY(4px);
  box-shadow: 1px 2px 0px 0px #e99f4c;
}

.btn {
  padding: 15px;
  margin: 25px 0px;
  width: 290px;
  font-size: 15px;
  background: #de5499;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 3px 3px 0px 0px #e99f4c;
}

.btn:hover {
  opacity: 0.9;
}

.link {
  font-weight: 800;
  color: #264143;
  padding: 5px;
}
</style>
